import React, { Component } from "react";
import { Input } from "antd";

class InputOnBlur extends Component {
  state = { propsValue: undefined, value: "" };

  // react 生命周期中的一个静态方法，用于比较并更新当前的输入值
  static getDerivedStateFromProps(nextProps, state) {
    if ("value" in nextProps) {
      const { value } = nextProps;
      if (value !== state.propsValue) {
        return { propsValue: value, value };
      }
    }
    return null;
  }

  render() {
    const { placeholder, onChange } = this.props;
    return (
      <Input
        ref={input => {
          this.input = input;
        }}
        value={this.state.value}
        placeholder={placeholder}
        onBlur={onChange}
        onChange={a => {
          this.setState({ value: a.target.value });
        }}
        onPressEnter={onChange}
      />
    );
  }
}

export default InputOnBlur;
